<template>
<view class="container">
    <view class="banner">
        <swiper class="swiper_box" indicator-dots="true" vertical circular="true" autoplay="true" interval="3000" duration="1000" indicator-color="#B5B7B9" indicator-active-color="#fff">
            <block v-for="(item, index) in banner" :key="index">
                <swiper-item>
                    <image @tap="adTopage" :data-type="item.media_type" :data-link="item.ad_link" :src="item.ad_code" class="slide-image"></image>
                </swiper-item>
            </block>
        </swiper>
    </view>
    <view class="notice-box">
        <view class="notice-box-left">提货公告</view>
        <view class="notice-box-right">
            <view id="tpdm-mes-title">

                <swiper class="swiper_box" indicator-dots="false" circular="true" vertical="true" autoplay="true" interval="3000">
                    <block v-for="(item, index) in notices" :key="index">
                        <swiper-item>
                            <view @tap="adTopage" :data-type="item.media_type" :data-link="item.ad_link">{{item.ad_name}} </view>
                        </swiper-item>
                    </block>
                </swiper>

                <!-- <block wx:for="{{notices}}" wx:key="index">
                    <view>{{item.ad_name}} </view>
                </block> -->
            </view>
        </view>
    </view>
    <view class="goods-container">
        <view v-for="(item, index) in orderList.list" :key="index" class="goods-box" :data-id="item.id" @tap="getCardGoods" :data-sn="item.sn">

            <view class="list-item-img">
                <image :src="item.back_img ? item.back_img : 'http://shop.zidii.com/public/images/icon_goods_thumb_empty_300.png'" class="cart-image"></image>
            </view>
            <view class="list-item-info">
                <view class="list-item-title">{{item.name}}</view>
                <view class="list-item-title" style="top:140rpx;">卡号:{{item.sn}}</view>
                <view class="list-item-btn">立即提货</view>
                <image class="activate_img" src="http://shop.zidii.com/template/mobile/rainbow/static/images/shopping_card/activate_t.png"></image>
            </view>

        </view>
        <view class="no-data" v-if="!orderList.list || orderList.list.length == 0">
            <image src="/static/images/cart-null.png" class="cart-image"></image>
            <view class="no-data-title">暂无提货券</view>
            <!-- <navigator url="/pages/index/index/index" class="lookat" > 去逛逛 </navigator> -->
        </view>
        <view class="card-btn" v-if="islogin" @tap="toggleCardBox">
            兑换提货券
        </view>
        <view class="card-btn" v-if="!islogin" @tap.stop="login">
            点击授权登录
        </view>
        <view class="card-bg" v-if="showCardBox" @tap="toggleCardBox"></view>
        <view class="card-box" v-if="showCardBox">
            <view class="card-box-title">
                兑换提货券
            </view>
            <view class="card-box-info">
                <view class="card-box-input">
                    <input type="text" class="item-input" @input="onChangeInput" name="sn" id="sn" placeholder-class="placeholder" placeholder="请输入提货券账号" value></input>
                </view>
                <view class="card-box-input">
                    <input type="password" class="item-input" @input="onChangeInput" name="card_password" id="card_password" placeholder-class="placeholder" placeholder="请输入激活码" value></input>
                </view>
                <view class="card-rule" style="color:#333">
                    温馨提示：请用大写英文字母输入。
                </view>
                <view class="card-rule">
                    《提货券兑换协议》
                </view>
            </view>
            <view class="card-bottom">
                <view class="card-bottom-btn cancle" @tap="toggleCardBox">
                    取消
                </view>
                <view class="card-bottom-btn" @tap="getCard">
                    确定
                </view>
            </view>
        </view>
    </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      orderList: null,
      //请求的订单列表
      currentPage: 1,
      showCardBox: 0,
      sn: '',
      card_password: '',
      banner: [],
      notices: [],
      webUrl: '',
      userInfo: {
        collect_count: 0,
        message_count: 0,
        waitPay: 0,
        waitReceive: 0,
        uncomment_count: 0,
        return_count: 0,
        user_money: 0,
        coupon_count: 0,
        pay_points: 0,
        islogin: false
      },
      islogin: false,
      disabled: false
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var status = false;
    var that = this;
    console.log(app.globalData.userInfo); // //先预设值，加速加载

    if (app.globalData.userInfo) {
      that.setData({
        userInfo: app.globalData.userInfo
      });
      status = true;
    }

    if (status) {
      that.setData({
        islogin: true
      });
      this.requestOrderList();
    } else {
      that.setData({
        islogin: false
      });
    }

    this.getBanners();
    uni.stopPullDownRefresh(); // var id = typeof options.type == 'undefined' ? this.data.activeCategoryId : options.type;
    // load.init(this, 'order_list', 'orderList');
    // this.requestOrderList();
    // wx.removeStorageSync('order:order_list:update');
  },
  onShow: function () {
    var status = false;
    var that = this;
    console.log(app.globalData.userInfo); // //先预设值，加速加载

    if (app.globalData.userInfo) {
      that.setData({
        userInfo: app.globalData.userInfo
      });
      status = true;
    }

    if (status) {
      that.setData({
        islogin: true
      });
      this.requestOrderList();
    } else {
      that.setData({
        islogin: false
      });
    } // var status = false;
    // console.log(app.userInfo);
    // // //先预设值，加速加载
    // if (app.userInfo) {
    //     that.setData({ userInfo: app.userInfo });
    //     status = true;
    // }
    // if (status){
    //     that.setData({ islogin: true });
    //     this.requestOrderList();
    // } else {
    //    that.setData({ islogin: false });
    // }
    // if (wx.getStorageSync('order:order_list:update')) {
    //     wx.setStorageSync('order:order_list:update', false);
    //     this.resetData();
    // }

  },
  methods: {
    login: function () {
      var that = this;
      if (that.click) return false;
      that.click = true;

      if (!that.userInfo.user_id) {
        app.globalData.getUserInfo(function (userInfo) {
          that.click = false;
          that.setData({
            islogin: true
          });
          app.globalData.userInfo = userInfo;
          that.setData({
            userInfo: userInfo
          });
          that.requestOrderList();
        }, true, false);
      } else {
        that.click = false;
      }
    },
    bindGetUserinfo: function (res) {
      var that = this;

      if (res.detail.userInfo != undefined) {
        try {
          uni.setStorageSync('wx_user_info', res.detail);
          app.globalData.wechatUser = res.detail.userInfo;
          app.globalData.auth.checkLogin(app.globalData.code, res.detail, function (loginData) {
            app.globalData.showSuccess('授权信息成功！', function () {
              uni.removeStorageSync('first_leader');
              uni.removeStorageSync('unique_id');
              that.setData({
                'userInfo.head_pic': loginData.head_pic,
                'userInfo.nickname': loginData.nickname,
                'userInfo.openid': loginData.openid
              });
            });
          });
        } catch (e) {
          console.log(e);
        }
      } else {
        console.log('bindGetUserinfo fail . res.detail.userInfo is undefined');
      }

      return false;
    },
    toggleCardBox: function () {
      var that = this;
      var showCardBox = that.showCardBox;
      that.setData({
        showCardBox: !showCardBox
      });
    },
    getCard: function () {
      var that = this;
      var sn = that.sn;
      var card_password = that.card_password;

      if (sn == '') {
        uni.showToast({
          title: '请输入提货券账号',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      if (card_password == '') {
        uni.showToast({
          title: '请输入提货券密码',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      var data = {
        sn: sn,
        card_password: card_password
      };
      var requestUrl = that.url + '/api/shopping_card/gain';
      var showCardBox = that.showCardBox;
      request.post(requestUrl, {
        data: data,
        failRollback: false,
        success: function (res) {
          if (res.data.status == 1) {
            app.globalData.showSuccess(res.data.msg, function () {
              that.setData({
                showCardBox: 0
              });
              that.requestOrderList();
            });
          } else {
            app.globalData.confirmBox(res.data.msg);
            that.setData({
              disabled: true
            });
          }
        }
      });
    },

    onChangeInput(e) {
      var inputId = e.currentTarget.id;
      var detail = e.detail.value;

      if ('sn' === inputId) {
        this.setData({
          sn: detail
        });
      }

      if ('card_password' === inputId) {
        this.setData({
          card_password: detail
        });
      }
    },

    adTopage: function (e) {
      var media_type = e.currentTarget.dataset.type;
      var ad_link = e.currentTarget.dataset.link;

      if (media_type == 3) {
        if (ad_link != '') {
          uni.navigateTo({
            url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + ad_link
          });
        }
      } else if (media_type == 4) {
        if (ad_link != '') {
          uni.navigateTo({
            url: '/pages/goods/goodsList/goodsList?cat_id=' + ad_link
          });
        }
      } else if (media_type == 5) {
        if (ad_link != '') {
          this.setData({
            webUrl: ad_link
          });
          uni.navigateTo({
            url: '/pages/index/webview/webview'
          });
        }
      } else {
        if (ad_link != '') {
          this.setData({
            webUrl: ad_link
          });
          uni.navigateTo({
            url: '/pages/index/webview/webview'
          });
        }
      }
    },
    // changeTab: function(e) {
    //     this.resetData();
    //     this.requestOrderList();
    // },
    //重置数据
    // resetData: function () {
    //     load.resetConfig();
    //     this.data.orderList = null;
    //     this.data.currentPage = 1;
    // },

    /** 请求订单数据 */
    requestOrderList: function () {
      var that = this;
      var requestUrl = that.url + '/api/shopping_card/card_list';
      request.get(requestUrl, {
        success: function (res) {
          that.setData({
            orderList: res.data.result
          }); // wx.stopPullDownRefresh();
        }
      });
    },
    getBanners: function () {
      var that = this;
      var requestUrl = that.url + '/api/shopping_card/get_banners';
      request.get(requestUrl, {
        success: function (res) {
          that.setData({
            banner: res.data.advs,
            notices: res.data.notices
          }); // wx.stopPullDownRefresh();
        }
      });
    },
    getCardGoods: function (e) {
      var that = this;
      var sn = e.currentTarget.dataset.sn;
      var requestUrl = that.url + '/api/shopping_card/getCardDetail';
      request.get(requestUrl, {
        data: {
          sn: sn
        },
        success: function (res) {
          console.log(res);

          if (res.data.status == 1) {
            var goods_id = res.data.result.goods_id;
            var card_id = res.data.result.card_id;
            uni.navigateTo({
              url: "/pages/cart/cart2/cart2?goods_id=" + goods_id + "&shoppingcard_id=" + card_id + "&goods_num=1&action=buy_now&item_id=0"
            }); // pages/goods/goodsInfo/goodsInfo?goods_id=14
            // app.showSuccess(res.data.msg, function () {
            // });
          } else {
            app.globalData.confirmBox(res.data.msg);
          }
        }
      });
    },
    // onReachBottom: function () {
    //     if (load.canloadMore()) {
    //         this.requestOrderList(this.data.activeCategoryId);
    //     }
    // },
    // onPullDownRefresh: function (e) {
    //     this.resetData();
    //     this.requestOrderList(this.data.activeCategoryId);
    // },

    /** 跳到cart4页面 */
    jumpToCart4: function (e) {
      var order = this.orderList.order_list[e.currentTarget.dataset.idx];
      common.jumpToCart4({
        order_sn: order.order_sn,
        order_amount: order.order_amount
      });
    }
  }
};
</script>
<style>
/* order_list.wxss */
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:84rpx;
    background-color: #fff;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
}
.container {
    /* padding-top: 80rpx; */
}
.type-box{
    width:25%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 76rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
    position: relative;
    color:#ff6a00;
    font-weight: bold;
}
.type-item-on::before{
  content: '';
  display: block;
  bottom: -3rpx;
  position: absolute;
  width: 50rpx;
	height: 5rpx;
	background-color: #ff6a00;
  left: 30rpx;
}
.goods-container{
    display: flex;
    justify-content: space-between;  
    flex-wrap:wrap;
    box-sizing: content-box;
    padding-top: 20rpx;
}
.goods-box{
    background-color: #fff;
    font-size: 28rpx;
    width: 710rpx;
    margin: 0 auto;
    border-radius: 10rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    position: relative;
    height: 250rpx;
    border-radius: 10rpx;
    overflow: hidden;
}
.list-item-img{
    height: 250rpx;
    width: 250rpx;
}
.list-item-title{
    position: absolute;
    top: 20rpx;
    left: 270rpx;
    font-size: 30rpx;
}
.list-item-btn{
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
}
.activate_img{
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    top: 0;
    right: 0;
}
.list-item-img image{
    width: 100%;
    height: 100%;
}
.card-btn{
    width: 60%;
    margin-left: 20%;
    margin-top: 20rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: #ff6a00;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
    line-height: 80rpx;
}
.goods-title{
    display: flex;
    justify-content:space-between;
    align-items:center;
    height: 80rpx;
    border-bottom: 1rpx solid #f3f3f3;
    padding: 0 20rpx;
}
.store-logo{
    height: 30rpx;
    width: 30rpx;
    border-radius: 25%;
    margin-right:10rpx;
    vertical-align:top;
    position: relative;
    top: 5rpx;
}
.store-name{
    color: #666;
    font-size: 28rpx;
}
.order-number{
    font-size: 24rpx;
    color: #666;
    margin: 30rpx 0;
    padding: 0 20rpx;
}
.pay-status{
    color:#F39818;
}
.goods-cont{
    padding: 20rpx 0;
    margin: 0 20rpx;
    display: flex;
    justify-content:space-between;
    position: relative;
    border-bottom: 1rpx solid #f3f3f3;
}
.cont-box .goods-cont:last-child{
    border:0;
}
.img-box{
    width: 150rpx;
    height: 150rpx;
    border-radius: 5rpx;
}
.goods-mes{
    width: 500rpx;
}
.goods-mes .top{
    width: 100%;
    height: 90rpx;
    box-sizing: border-box;
}
.goods-mes .top .left{
    width: 330rpx;
    float: left;
    color: #666666;
    margin: 10rpx 0rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.goods-mes .top .right{
    width: 150rpx;
    float: right;
    margin: 10rpx 0rpx;
    color:#999999;
    font-size: 22rpx;
}
.goods-mes .top .right .price{
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.goods-mes .top .right .num{
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.goods-mes .bottom{
    color: #999999;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 22rpx;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}
.return-btn{
    color: #999999;
    position: absolute;
    right: 0;
    bottom: 0rpx;
    height: 80rpx;
    line-height: 80rpx;
}
.goods-tips{
    height: 48rpx;
    padding: 15rpx 20rpx;
    display: flex;
    justify-content:space-between;
    align-items:center;
    border-top: 1rpx solid #f3f3f3;
}
.order-total{
    display: flex;
    justify-content:flex-start;
    font-size: 24rpx;
    color: #333;
}
.goods-total{
    margin-right:20rpx;
    color:#ff6a00;
}
.order-btn{
    width: 150rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    margin-left: 20rpx;
    float: right;
    border-radius: 5rpx;
    background: #ff6a00;
    color: #fff;
    font-size: 24rpx;
    border: 1rpx solid #ff6a00;
    box-sizing: border-box;
}
.order-btn-pay{
    color: #fff;
    background-color:#ff6a00;
    border-color:#ff6a00;
}
.cancel-btn{
    width: 150rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    margin-left: 20rpx;
    float: right;
    border-radius: 5rpx;
    background: #fff;
    color: #999999;
    font-size: 24rpx;
    border: 1rpx solid #E6E6E6;
    box-sizing: border-box;
}
.countbox{
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  text-align: right;
  padding: 0 20rpx;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 20rpx;
}
.countbox .all{
  font-size: 24rpx;
  color: #999999;
  margin-left: 15rpx;
}
.countbox .word{
  font-size: 24rpx;
  color: #666666;
  margin-left: 15rpx;
}
.countbox .money{
  color: #ff6a00;
  font-size: 28rpx;
  margin-left: 15rpx;
  font-weight: 600;
}

.card-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: rgba(0,0,0,0.8);
}
.card-box{
    position: fixed;
    width: 80%;
    left: 10%;
    top: 10%;
    background: #fff;
    border-radius: 10rpx;
    z-index: 9999;
}

.card-box-title{
    width: 100%;
    height: 130rpx;
    text-align: center;
    line-height: 130rpx;
    font-size: 38rpx;
}
.card-box-info{
    width: 100%;
    background: #EFF0F4;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}
.card-box-input{
    width: 90%;
    height: 60rpx;
    margin-left: 5%;
    margin-top: 30rpx;
    background: #fff;
    border-radius: 10rpx;
}
.card-box-input input {
    font-size: 30rpx;
    padding:0 10rpx;
}
.card-rule{
    margin: 20rpx 5%;
    font-size: 28rpx;
    color: #ff6a00;
}
.card-bottom{
    padding: 20rpx 0;
    height: 60rpx;
}
.card-bottom-btn{
    width: 40%;
    margin-left: 6%;
    height: 60rpx;
    float: left;
    background: #ff6a00;
    color: #fff;
    border-radius: 30rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    border:1rpx solid #ff6a00;
}
.card-bottom-btn.cancle{
    background: #fff;
    color: #ff6a00;
}

.banner{
  width: 100%;
  margin: 0 auto;
  height: 284rpx;
  padding-top: 50rpx;
  border-bottom: 80rpx solid #f5f5f5;
  position: relative;
  background: #f5f5f5;
}
.banner .baner_bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 278rpx;
  background: #ff6a00;
}
.banner swiper{
  width: 100%;
  height: 340rpx;
  overflow: hidden;
  margin: 0 auto;
}
.swiper_box {
    width: 100%;
    height: 340rpx;
}
swiper-item image {
    width: 710rpx;
    margin: 0 auto;
    height: 340rpx;
    border-radius: 10rpx; 
    overflow: hidden;
    display: block;
}

.notice-box{
    width: 94%;
    margin-left: 3%;
    border-radius: 12rpx;
    margin-top: 20rpx;
    overflow: hidden;
    background: #fff;
    height: 80rpx;
    font-size: 26rpx;
}
.notice-box .notice-box-left{
    width: 20%;
    float: left;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
}
.notice-box .notice-box-right{
    width: 80%;
    float: left;
    height: 80rpx;
    line-height: 80rpx;
}
.notice-box .notice-box-right ul li{
    height: 80rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
</style>